<template>
  <div class="container_mailList">
    <div class="container_mailList__header">
      <div
        :class="{ container_mailList__header__left: true, active: office }"
        @click="toOffice"
      >
        我的工作室
      </div>
      <div
        :class="{ container_mailList__header__mid: true, active: patient }"
        @click="toPatient"
      >
        我的患者
      </div>
      <div class="container_mailList__header__right iconfont">&#xe685;</div>
    </div>
    <router-view></router-view>
  </div>
  <bottomNav type="mailList" />
</template>
<script setup>
import { ref } from "vue";
import { useRoute, useRouter } from "vue-router";
import bottomNav from "../bottomNav/bottomNav.vue";
const office = ref(false);
const patient = ref(false);
const router = useRouter();
const route = useRoute();
if (route.path.split("/")[2] === "patient") {
  patient.value = true;
} else if (route.path.split("/")[2] === "office") {
  office.value = true;
}
function toOffice() {
  router.push("/mailList/office/message");
  office.value = true;
  patient.value = false;
}
function toPatient() {
  router.push("/mailList/patient");
  office.value = false;
  patient.value = true;
}
</script>
<style lang="scss" scope>
.container_mailList {
  width: 414rem;
  box-sizing: border-box;
  padding-bottom: 37rem;
  overflow: hidden;
  overflow-y: auto;
  &__header {
    width: 414rem;
    height: 88rem;
    box-sizing: border-box;
    padding: 44rem 10rem 0 10rem;
    box-sizing: border-box;
    background-color: #6481da;
    display: flex;
    justify-content: space-between;
    align-items: end;
    font-size: 18rem;
    color: #fff;
    &__left {
      width: 110rem;
      height: 26rem;
      padding: 10rem;
      text-align: center;
    }
    &__mid {
      width: 110rem;
      height: 26rem;
      padding: 10rem;
      text-align: center;
      margin-left: -100rem;
    }
    &__right {
      font-size: 20rem;
      margin-bottom: 10rem;
    }
    & .active {
      font-size: 22rem;
      border-bottom: 4rem solid #fff;
    }
  }
}
</style>
